<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜儿</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/header.css">
    <!-- 引入iconfont -->
    <link rel="stylesheet" href="../lib/iconfont/iconfont.css">
    <script src="../js/data.js"></script>
    <!-- 引入header.js -->
    <script src="../js/header.js"></script>
</head>

<body>
    <!-- 头部导航 -->
    <header>
        <div class="w">
            <ul>
                <li><a href="javascript:;">请先登录</a></li>
                <li></li>
                <li><a href="javascript:;">免费注册</a></li>
                <li></li>
                <li><a href="../html/orders.html">我的订单</a></li>
                <li></li>
                <li><a href="../html/personal.html">会员中心</a></li>
                <li></li>
                <li><a href="javascript:;">帮助中心</a></li>
                <li></li>
                <li><a href="javascript:;">在线客服</a></li>
                <li></li>
                <li><a href="javascript:;"><i class="iconfont icon-shouji"></i> 手机版</a></li>
            </ul>
        </div>
    </header>
    <!-- 导航栏 -->
    <nav>
        <div class="w">
            <h1 class="logo">
                <a href="javascript:;">
                    小兔鲜儿
                </a>
            </h1>
            <ul>
                <li><a href="../html/index.html">首页</a></li>
                <li><a href="../html/classify.html">居家</a></li>
                <li><a href="javascript:;">美食</a></li>
                <li><a href="javascript:;">服饰</a></li>
                <li><a href="javascript:;">母婴</a></li>
                <li><a href="javascript:;">个护</a></li>
                <li><a href="javascript:;">严选</a></li>
                <li><a href="javascript:;">数码</a></li>
                <li><a href="javascript:;">运动</a></li>
                <li><a href="javascript:;">杂项</a></li>
            </ul>
            <div class="search">
                <i class="iconfont icon-search"></i>
                <input type="text" name="search" id="inp_search" placeholder="搜一搜">
            </div>
            <div class="shoppingCart">
                <i class="iconfont icon-i-shoping-car"></i>
                <span class="showNums"><i>0</i></span>
            </div>
        </div>
    </nav>
    <!-- 滚动才显示的导航栏开始 -->
    <nav class="slide_nav">
        <div class="w">
            <h1 class="logo">
                <a href="javascript:;">
                    小兔鲜儿
                </a>
            </h1>
            <ul>
                <li><a href="../html/index.html">首页</a></li>
                <li><a href="javascript:;">居家</a></li>
                <li><a href="javascript:;">美食</a></li>
                <li><a href="javascript:;">服饰</a></li>
                <li><a href="javascript:;">母婴</a></li>
                <li><a href="javascript:;">个护</a></li>
                <li><a href="javascript:;">严选</a></li>
                <li><a href="javascript:;">数码</a></li>
                <li><a href="javascript:;">运动</a></li>
                <li><a href="javascript:;">杂项</a></li>
            </ul>
            <div class="search">
                <i class="iconfont icon-search"></i>
                <input type="text" name="search" id="inp_search" placeholder="搜一搜">
            </div>
            <div class="shoppingCart">
                <i class="iconfont icon-i-shoping-car"></i>
                <span class="showNums"><i>0</i></span>
            </div>
        </div>
    </nav>
    <!-- 滚动才显示的导航栏结束 -->
    <!-- 轮播图 -->
    <div class="box">
        <div class="home-banner w">
            <img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/dfc11bb0-4af5-4e9b-9458-99f615cc685a.jpg"
                alt="">
            <ol class="circle"></ol>
            <div class="home-category">
                <ul class="menu">
                    <li>
                        <a href="#" data-index="0">居家</a>
                        <a href="#" data-index="0">居家生活用品</a>
                        <a href="#" data-index="0">收纳</a>
                    </li>
                    <li>
                        <a href="#" data-index="1">美食</a>
                        <a href="#" data-index="1">南北干货</a>
                        <a href="#" data-index="1">调味酱菜</a>
                    </li>
                    <li>
                        <a href="#" data-index="2">服饰</a>
                        <a href="#" data-index="2">钱包/胸包</a>
                        <a href="#" data-index="2">女式靴子</a>
                    </li>
                    <li>
                        <a href="#" data-index="3">母婴</a>
                        <a href="#" data-index="3">T恤/polo/衬衫</a>
                        <a href="#" data-index="3">儿童鞋</a>
                    </li>
                    <li>
                        <a href="#" data-index="4">个护</a>
                        <a href="#" data-index="4">家庭清洁</a>
                        <a href="#" data-index="4">浴室用品</a>
                    </li>
                    <li>
                        <a href="#" data-index="5">严选</a>
                        <a href="#" data-index="5">滋补保健</a>
                        <a href="#" data-index="5">床品家纺</a>
                    </li>
                    <li>
                        <a href="#" data-index="6">数码</a>
                        <a href="#" data-index="6">居家生活用品</a>
                        <a href="#" data-index="6">3C数码</a>
                    </li>
                    <li>
                        <a href="#" data-index="7">运动</a>
                        <a href="#" data-index="7">健身大器械</a>
                        <a href="#" data-index="7">健身小器械</a>
                    </li>
                    <li>
                        <a href="#" data-index="8">杂项</a>
                        <a href="#" data-index="8">家庭清洁杂项</a>
                    </li>
                </ul>
            </div>
            <div class="home-tab">
                <h4>分类推荐
                    <small>根据您的购买或浏览记录推荐</small>
                </h4>
                <div class="tab">
                    <ul>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 商品部分 -->
    <div class="content w">
        <div class="home-new">
            <div class="head">
                <h3>新鲜好物</h3>
                <div>
                    <span>新鲜出炉 品质靠谱</span>
                    <span>查看全部 ❯</span>
                </div>
            </div>
            <ul class="good-list">
                <li>
                    <img src="https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png" alt="">
                    <p class="name">抓绒保暖，毛毛虫儿童运动鞋26-30</p>
                    <p class="price">¥109.00</p>
                </li>
                <li>
                    <img src="https://yanxuan-item.nosdn.127.net/fa3d10a78d37bbd3956ef5f8c855d1dc.jpg" alt="">
                    <p class="name">休闲潮流运动男士胸包</p>
                    <p class="price">¥136.00</p>
                </li>
                <li>
                    <img src="https://yanxuan-item.nosdn.127.net/841d7669e6cc23cb249f47d8d39fc17c.jpg" alt="">
                    <p class="name">新款LOGO印花时尚学步叫叫鞋</p>
                    <p class="price">¥259.00</p>
                </li>
                <li>
                    <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
                    <p class="name">经典格子元素，男童加绒格子衬衫</p>
                    <p class="price">¥125.00</p>
                </li>
            </ul>
        </div>
        <div class="home-hot">
            <div class="head">
                <h3>人气推荐</h3>
                <div>
                    <span>人气爆款 不容错过</span>
                </div>
            </div>
            <ul class="good-list">
                <li>
                    <img src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg" alt="">
                    <p class="name">特惠推荐</p>
                    <p class="desc">它们最实惠</p>
                </li>
                <li>
                    <img src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_2.jpg" alt="">
                    <p class="name">爆款推荐</p>
                    <p class="desc">它们最受欢迎</p>
                </li>
                <li>
                    <img src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_3.jpg" alt="">
                    <p class="name">一站买全</p>
                    <p class="desc">使用场景下精心优选</p>
                </li>
                <li>
                    <img src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_4.jpg" alt="">
                    <p class="name">领券中心</p>
                    <p class="desc">更多超值优惠券</p>
                </li>
            </ul>
        </div>
    </div>
    <!-- 尾部关于我们 -->
    <footer>
        <!-- 尾部上面 -->
        <div class="footer_top w">
            <!-- 客户服务 -->
            <div class="kehu">
                <div>客户服务</div>
                <div>
                    <span><i class="iconfont icon-a-4_huaban1"></i>在线客服</span>
                    <span><i class="iconfont icon-question"></i>问题反馈</span>
                </div>
            </div>
            <!-- 关注我们 -->
            <div class="aboutus">
                <div>关注我们</div>
                <div>
                    <span><i class="iconfont icon-weixin"></i>公众号</span>
                    <span><i class="iconfont icon-xinlangweibo"></i>微博</span>
                </div>
            </div>
            <!-- 下载app -->
            <div class="download_app">
                <div>下载APP</div>
                <div>
                    <span><img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/qrcode.520695e8.jpg" alt=""></span>
                    <div class="btn_download">
                        <i>扫描二维码立马下载app</i>
                        <button>下载页面</button>
                    </div>
                </div>
                <div>
                </div>
            </div>
            <!-- 服务热线 -->
            <div class="rexian">
                <div>服务热线</div>
                <div>
                    <div>400-0000-000</div>
                    <div>周一至周日 8:00-18:00</div>
                </div>
            </div>
        </div>

        <!-- 尾部下面 -->
        <div class="footer_bottom">
            <div class="w">
                <div class="footerUp">
                    <div><i class="iconfont icon-xiangzi"></i><span>价格亲民</span></div>
                    <div><i class="iconfont icon-dianzan"></i><span>物流快捷</span></div>
                    <div><i class="iconfont icon-huoche"></i><span>品质新鲜</span></div>
                </div>
                <div class="footerBottom">
                    <ul>
                        <li>关于我们</li>
                        <li></li>
                        <li>帮助中心</li>
                        <li></li>
                        <li>售后服务</li>
                        <li></li>
                        <li>配送与验收</li>
                        <li></li>
                        <li>商务合作</li>
                        <li></li>
                        <li>搜索推荐</li>
                        <li></li>
                        <li>友情链接</li>
                    </ul>
                    <div>CopyRight &copy; 小兔鲜儿</div>
                </div>
            </div>
        </div>
    </footer>
    <!-- 引入iconfont -->
    <script src="../lib/iconfont/iconfont.js"></script>
    <script src="../js/index.js"></script>
</body>

</html>